<script setup lang="ts">
import { useRoute } from 'vue-router';
import { ArrowRight } from '@element-plus/icons-vue'
import { getProduct } from '@/api/product';
import type { Product } from '@/types/product';
import { useDict, transformDict } from '@/hooks/dict';
useDict('productMainGuaranteeType', 'repaymentType')

const route = useRoute();
const product = reactive<Product>({});
function loadDataDetail() {
  getProduct(route.params.id).then(res => {
    Object.assign(product, res.data)
  })
}


import useApply from '@/hooks/apply'
const { applyProduct } = useApply()

onMounted(() => {
  loadDataDetail()
})
</script>
<template>
  <div class="w-1200 m-auto">
    <div class="pt-7 pb-5 mt-3">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/financial-products' }">金融产品</el-breadcrumb-item>
        <el-breadcrumb-item>{{ product.institutionName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="flex gap-6">
      <div class="w-4/6">
        <div class="details-left-top">
          <div class="w-62.5 h-12.5">
            <img class="w-auto h-auto max-w-full max-h-full" :src="product.orgLogo" />
          </div>
          <el-descriptions class="mt-7" :column="4">
            <template #title>
              <h2 class="text-5">
                {{ product.belongInstitutionName }}
                <span>
                  -
                </span>
                <span class="text-3.5 col6">
                  {{ product.productName }}
                </span>
              </h2>
            </template>
            <el-descriptions-item label-class-name="text-3.7 col9" label="贷款额度：">
              <span class="text-[#f36f13]">
                {{ product.amountLimitLower }}-{{ product.amountLimitUpper }}万
              </span>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="text-3.7 col9 " label="贷款期限：">
              <span class="text-[#f36f13]">
                {{ product.loanPeriodLimitLower
                }}-{{
                  product.loanPeriodLimitUpper
                }}月
              </span>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="text-3.7 col9" label="申请次数：">{{ product.applyNum || 0
              }}</el-descriptions-item>
            <el-descriptions-item label-class-name="text-3.7 col9" label="利率范围：">
              <span class="text-[#f36f13]">
                {{ product.interestRateLimitLower }} - {{ product.interestRateLimitUpper }}%
              </span>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="text-3.7 col9" label="担保方式：">
              {{ transformDict('productMainGuaranteeType', product.mainGuaranteeWay) }}

            </el-descriptions-item>
          </el-descriptions>
          <div>
            <p>
              <span>还款方式：</span>
              {{ transformDict('repaymentType', product.repaymentWay) }}
            </p>
            <p class="mt-3.5"><span>适用范围：{{ product.serviceArea }}</span></p>
          </div>
          <div class="text-right">
            <el-button type="primary" class="mt-6.5 ml-auto" style="font-size: 18px;"
              @click="applyProduct(product)">立即申请</el-button>
          </div>
        </div>
        <div class="details-left-top" style="padding: 0;">
          <ul>
            <li>
              <p class="text-4 pb-4">产品特色</p>
              <p class="li-p" v-html="product?.extendInfo?.productFeature"></p>
            </li>
            <li>
              <p class="text-4 pb-4">产品介绍</p>
              <p class="li-p" v-html="product?.extendInfo?.productDescription"></p>
            </li>
            <li>
              <p class="text-4 pb-4">适用客户</p>
              <p class="li-p">{{ product?.extendInfo?.productSuitPopulation }}</p>
            </li>
            <li>
              <p class="text-4 pb-4">准入条件</p>
              <!-- <p class="li-p"> -->
              <p> 经营时间大于(月)：{{ product?.accessStandard?.operationTimeLimitLower }}</p>
              <p class="mt-2"> 注册资本大于(万)：{{ product?.accessStandard?.registerFundLimitLower }}</p>
              <p class="mt-2">企业持续纳税(年)：{{ product?.accessStandard?.payTaxDuration }}</p>
              <p class="mt-2">上年度开票营业收入大于(万)：{{ product?.accessStandard?.preYearIncome }}</p>
              <p class="mt-2">抵押物、企业注册地与产品服务范围一致：{{ product?.accessStandard?.operationTimeLimitLower }}</p>
              <p class="mt-2">企业欠税限制：{{ product?.accessStandard?.owingTax }}</p>
              <p class="mt-2">
                法人变更限制：近{{ product?.accessStandard?.legalPersonChangeLimitMonth }}月，变更小于等于{{
                  product?.accessStandard?.legalPersonChangeLimitNumber }}次
              </p>
              <p class="mt-2">个体工商户：{{ product?.accessStandard?.operationTimeLimitLower }}</p>
              <p class="mt-2">上年度纳税额(万)：{{ product?.accessStandard?.preYearPayTaxAmount }}</p>
              <p class="mt-2">当前贷款余额小于(万)：{{ product?.accessStandard?.loanRemainAmount }}</p>
              <p class="mt-2">企业当前融资银行数量小于(家)：{{ product?.accessStandard?.operationTimeLimitLower }}</p>
              <p class="mt-2">企业注册地产品服务地区一致：允许申请</p>
              <p class="mt-2">小微企业：{{ product?.accessStandard?.microEnterpriseLimit }}</p>
              <p class="mt-2">纳税等级要求：{{ product?.accessStandard?.operationTimeLimitLower }}</p>
              <p class="mt-2">
                企业主年龄要求(岁)：{{ product?.accessStandard?.ageLimitLower }}~{{ product?.accessStandard?.ageLimitUpper }}</p>
              <p class="mt-2">抵押物要求：{{ product?.accessStandard?.guaranteeLimit }}</p>
            </li>
            <li>
              <p class="text-4 pb-4">提交材料</p>
              <p class="li-p">{{ product.materials }}</p>
            </li>
            <li>
              <p class="text-4 pb-4">案例</p>
              <p class="li-p">{{ product.caseStudy || '无' }}</p>
            </li>
            <li>
              <p class="text-4 pb-4">特此声明</p>
              <p class="li-p">{{ product.disclaimer }}</p>
            </li>

          </ul>
        </div>
      </div>
      <div class=" w-2/6">
        <div class="details-left-top">
          <h2 class="text-4" style="color: #3e8eff;">相关推荐</h2>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.details-left-top {
  padding: 28px;
  margin-bottom: 28px;
  background: #fff;
  box-shadow: 0 0 7px 0 rgba(57, 120, 203, .1);

  li {
    border-bottom: 1px dashed #d4dcf0;
    margin: 0 43px;
    padding: 16px 0;
    cursor: default;

    &:last-child {
      border: none;
    }
  }
}
</style>
